<template>
    <div>
        <el-input placeholder="请输入公告标题" v-model="title" clearable style="margin-bottom: 10px;" />
        <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" />
        <el-upload class="upload_demo" action="https://upload.my2171.com/fileUpload" :on-remove="handleRemove"
            :before-remove="beforeRemove" :limit="1" :file-list="fileList" :data="options" :on-success="onSuccess">
            <el-button type="text">上传附件</el-button>
        </el-upload>
        <el-button type="primary" class="submit" @click="submit">发布</el-button>
    </div>
</template>

<script>
import tool from "ut/tool";
import { mapActions } from 'vuex';
export default {
    name: 'WebAddNotice',
    data() {
        return {
            editorOption: {},
            fileList: [],
            options: {
                src: 'bishe',
                type: 2
            },
            title: '',      // 公告标题
            content: '',    // 公告内容
            annex: '',      // 附件地址
        };
    },
    methods: {
        ...mapActions('Notice', ['release']),
        handleRemove() {
            tool.delFile(this.annex).then(res => {
                this.fileList = [];
                this.annex = '';
            })
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        onSuccess(e) {
            this.annex = e.data;
        },
        submit() {
            let { title,content,annex } = this;
            let msg;
            if (!title) msg = '请输入公告标题';
            else if (!content) msg = '请输入公告内容';
            else this.release({ title,content,annex });
        },
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";

::v-deep .ql-editor {
    .h(200px);
}

.upload_demo {
    .w(300px);
    .marg(10px, 0);
}

.submit {
    .size(120px, auto);
}
</style>